<template>
  <div class="home">
    <van-button block type="info" v-show="this.formData.cardno" @click="routerToList" >查看备案记录</van-button>
    <van-form validate-first @submit="onSubmit">
      <div class="czInfo">
        <div>企业信息</div>
      </div>
      <!--  -->
      <van-field
        input-align="right"
        label="企业名称"
        v-model="formData.qy_name"
        name="pattern"
        placeholder="请输入企业名称"
        :rules="[{ required: true }]"
      />
      <van-field input-align="right"
          v-if="isInAndOuts != 3"
          label="企业归属地"
          readonly
          name="pattern"
          placeholder="请选择企业归属地"
          v-model="formData.gsdName"
          @click="()=>{
            showPicker = true
            showPickerZIndex = index
          }"
        />
      <!-- <van-field
        input-align="right"
        label="营业执照-社会信用代码"
        v-model="formData.qy_code"
        name="pattern"
        placeholder="请输入社会信用代码"
        :rules="[{ required: true }]"
      /> -->
      <div class="czInfo">
        <div>收发货联系人</div>
      </div>
      <van-field
        input-align="right"
        label="身份证号"
        v-model="formData.cardno"
        name="pattern"
        placeholder="请输入身份证号"
        :rules="[{ required: true }]"
      />
      <van-field
        input-align="right"
        label="姓名"
        v-model="formData.name"
        name="pattern"
        placeholder="请输入姓名"
        :rules="[{ required: true }]"
      />
      <van-field
        input-align="right"
        label="电话号码"
        v-model="formData.tel"
        name="pattern"
        placeholder="电话号码"
        :rules="[{ required: true }]"
      />
      <van-field
        input-align="right"
        label="收货地址"
        v-model="formData.fh_address"
        name="pattern"
        placeholder="请输入收货地址"
        :rules="[{ required: true }]"
      />
      <van-field
        input-align="right"
        readonly
        label="到沈时间"
        :value="formData.arrive_time"
        placeholder="请选择到沈时间"
        @click="() => {
          time_type = true
          time_type_data = 'arrive_time'
        }"
      />
      <van-field
        input-align="right"
        readonly
        label="预计离沈时间"
        :value="formData.ls_time"
        placeholder="请选择预计离沈时间"
        @click="() => {
          time_type = true
          time_type_data = 'ls_time'
        }"
      />
      <van-field
        input-align="right"
        label="车牌号码"
        v-model="formData.car_number"
        name="pattern"
        readonly
        @click="keyState = true"
        placeholder="请输入车牌号码"
        :rules="[{ required: true }]"
      />
      <!-- formData.chepai_color -->
      <van-field
        input-align="right"
        readonly
        clickable
        label="车牌颜色"
        :value="formData.chepai_color_name"
        placeholder="请选择车牌颜色"
        @click="showPicker_t = true"
      />

      <van-field
        input-align="right"
        label="驾驶员姓名"
        v-model="formData.driver_name"
        name="pattern"
        placeholder="请输入驾驶员姓名"
        :rules="[{ required: true }]"
      />
      <van-field
        input-align="right"
        label="驾驶员电话"
        v-model="formData.driver_tel"
        name="pattern"
        placeholder="请输入驾驶员电话"
        :rules="[{ required: true }]"
      />
      <van-field
        input-align="right"
        label="驾驶员身份证"
        v-model="formData.driver_cardno"
        name="pattern"
        placeholder="请输入驾驶员身份证号"
        :rules="[{ required: true }]"
      />
      <div class="czInfo">
        <div>同行人员</div>
      </div>
      <div v-for="(item, index) in formData.peerList" :key="index">
        <div class="btn" v-if="index > 0" @click="removePeople(index)">
          <van-icon name="minus" />
          <span>删除同行人</span>
        </div>
        <van-field
          input-align="right"
          :label="'姓名' + (index + 1)"
          v-model="formData.peerList[index].passenger_name"
          name="pattern"
          placeholder="请输入姓名"
        />
        <van-field
          input-align="right"
          :label="'电话' + (index + 1)"
          v-model="formData.peerList[index].passenger_tel"
          name="pattern"
          placeholder="请输入电话"
        />
        <van-field
          input-align="right"
          :label="'身份证号' + (index + 1)"
          v-model="formData.peerList[index].passenger_cardno"
          name="pattern"
          placeholder="请输入身份证号"
        />
      </div>
      <div class="btn" @click="addPeople">
        <van-icon name="plus" />
        <span>添加同行人信息</span>
      </div>
      <!-- 提交 -->
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">确认提交</van-button>
      </div>
    </van-form>
    <!-- 时间选择器 -->
    <van-popup v-model="time_type" round position="bottom">
      <van-datetime-picker
        @confirm="getTimeConfirm"
        @cancel="time_type = false"
        v-model="currentDate"
        type="date"
        title="选择年月日"
      />
    </van-popup>
    <!-- 车牌号选择器 -->
    <keyword
      :isShow="keyState"
      @exit="carNumberConfirm"
      @inputchange="getKey"
      :oinp="formData.car_number"
      @ok="carNumberConfirm"
    />
    <!-- 车辆车牌颜色 -->
    <van-popup v-model="showPicker_t" round position="bottom">
      <van-picker
        title="请选择车辆车牌颜色"
        show-toolbar
        :columns="projectListArr"
        value-key="lable"
        @cancel="showPicker_t = false"
        @confirm="changeConfirm"
      />
    </van-popup>
    <!-- 卸货区 -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsAdress"
        value-key="name"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  getSstCode,
  insertCargoTransportationQy,
  getCargoTransportationInfoByCardnoForCg
} from '@/api/gov/home/index'
import { Toast } from 'vant'
import moment from 'moment'
import keyword from '../../components/keyword'
export default {
  name: 'closed',
  components: {
    keyword
  },
  data () {
    return {
      currentDate: new Date(),
      showPicker: false, // 归属地
      showPickerZIndex: 0, // 归属地index
      time_type: false, // 时间选择器
      time_type_data: '', // 时间选择数据
      keyState: false, // 车牌号吗选择器
      showPicker_t: false, // 来沈时间
      formData: {
        register_code: '', // 备案编号
        create_time: '', // 备案时间
        qy_name: '', // 企业名称
        gsd: '', // 归属地
        gsdName: '', // 归属地
        qy_code: '', // 信用代码
        name: '', // 闭环管理责任人 姓名
        tel: '', // 闭环管理责任人 电话
        cardno: '', // 闭环管理责任人 身份证
        fh_address: '', // 发收货地址
        arrive_time: '', // 到沈时间
        ls_time: '', // 预计离沈时间
        car_number: '', // 车牌号码
        chepai_color_name: '', // 车牌颜色
        chepai_color: '', // 车牌颜色
        driver_name: '', // 驾驶员姓名
        driver_tel: '', // 驾驶员电话
        driver_cardno: '', // 驾驶员身份证号
        peerList: [
          {
            passenger_name: '', // 随行人员 姓名
            passenger_tel: '', // 随行人员 电话
            passenger_cardno: '' // 随行人员 身份证
            // hesuan_result: '', // 随行人员 核酸结果
            // hesuan_detail: '', // 随行人员 核酸结果详情
            // quguo_high_risk: '', // 随行人员 是否去过高风险地区
          }
        ]
      },
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ],
      columnsAdress: [
        {
          'code': 'LM00001',
          'name': '和平区'
        },
        {
          'code': 'LM00002',
          'name': '沈河区'
        },
        {
          'code': 'LM00003',
          'name': '大东区'
        },
        {
          'code': 'LM00004',
          'name': '皇姑区'
        },
        {
          'code': 'LM00005',
          'name': '铁西区'
        },
        {
          'code': 'LM00006',
          'name': '浑南区'
        },
        {
          'code': 'LM00007',
          'name': '于洪区'
        },
        {
          'code': 'LM00008',
          'name': '沈北新区'
        },
        {
          'code': 'LM00009',
          'name': '苏家屯区'
        },
        {
          'code': 'LM00010',
          'name': '辽中区'
        },
        {
          'code': 'LM00011',
          'name': '康平县'
        },
        {
          'code': 'LM00012',
          'name': '法库县'
        },
        {
          'code': 'LM00013',
          'name': '新民市'
        }
      ]
    }
  },
  mounted () {
    document.title = '收货企业备案'
    localStorage.setItem('type', 'closed')
    console.log(localStorage.getItem('type'))
    this.getSstCode()
  },
  methods: {
    async getSstCode () {
      const res = await getSstCode()
      console.log(res, 'getSstCode')
      if (res.data.data.data.name) this.formData.name = res.data.data.data.name || ''
      if (res.data.data.data.card_no) this.formData.cardno = res.data.data.data.card_no || ''
      if (res.data.data.data.mobile) this.formData.tel = res.data.data.data.mobile || ''
      this.getformData('2', res.data.data.data.card_no)
    },
    // 获取备案编号和时间
    getformData (value, cardNo) {
      getCargoTransportationInfoByCardnoForCg({ driver_cardno: cardNo, arrive_type_one: value }).then(ret => {
        if (ret.data.errcode == 0) {
          const obj = ret.data.data
          console.log('obj', obj)
          this.formData.register_code = obj.register_code
          this.formData.create_time = obj.create_time
        }
      })
    },
    // 归属地选择
    onConfirm (val) {
      this.formData.gsd = val.code
      this.formData.gsdName = val.name
      this.showPicker = false
    },
    // 时间选择
    getTimeConfirm (value) {
      this.formData[this.time_type_data] = moment(value).format('YYYY-MM-DD')
      this.time_type = false
    },
    // 添加随行人员
    addPeople () {
      this.formData.peerList.push(
        {
          passenger_name: '', // 随行人员 姓名
          passenger_tel: '', // 随行人员 电话
          passenger_cardno: '' // 随行人员 身份证
          // hesuan_result: '', // 随行人员 核酸结果
          // hesuan_detail: '', // 随行人员 核酸结果详情
          // quguo_high_risk: '', // 随行人员 是否去过高风险地区
        }
      )
    },
    // 删除随行人员
    removePeople (index) {
      this.formData.sxList.splice(index, 1)
    },
    // 车牌号选择
    carNumberConfirm () {
      this.keyState = false
    },
    // 车牌号输入
    getKey (val) {
      if (this.formData.car_number.length >= 8 && val != 'delete') {
        return false
      }
      if (val == 'delete') {
        this.formData.car_number = this.formData.car_number.slice(0, this.formData.car_number.length - 1)
      } else {
        this.formData.car_number += val
      }
    },
    // 车牌颜色选择
    changeConfirm (val) {
      this.formData.chepai_color_name = val.lable
      this.formData.chepai_color = val.value
      this.showPicker_t = false
    },
    // 保存
    onSubmit () {
      let toast = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 10000
      })
      const data = JSON.parse(JSON.stringify(this.formData))
      data.peerList.map((e, index) => {
        if (e.passenger_name == '' || e.passenger_tel == '') {
          data.peerList.splice(index, 1)
        }
      })
      console.log('保存数据', data)
      insertCargoTransportationQy(data).then((res) => {
        if (res.data.errcode == 0) {
          toast.clear()
          Toast.success('提交成功')
          this.clrearData() // 清空表单
          setTimeout(() => {
            this.getSstCode()
          }, 200)
        } else {
          Toast.fail(res.data.errmsg)
        }
      })
    },
    // 清空表单
    clrearData () {
      this.formData = {
        register_code: '', // 备案编号
        create_time: '', // 备案时间
        qy_name: '', // 企业名称
        gsd: '', // 归属地
        gsdName: '', // 归属地
        qy_code: '', // 信用代码
        name: '', // 闭环管理责任人 姓名
        tel: '', // 闭环管理责任人 电话
        cardno: '', // 闭环管理责任人 身份证
        fh_address: '', // 发收货地址
        arrive_time: '', // 到沈时间
        ls_time: '', // 预计离沈时间
        car_number: '', // 车牌号码
        chepai_color_name: '', // 车牌颜色
        chepai_color: '', // 车牌颜色
        driver_name: '', // 驾驶员姓名
        driver_tel: '', // 驾驶员电话
        driver_cardno: '', // 驾驶员身份证号
        peerList: [
          {
            passenger_name: '', // 随行人员 姓名
            passenger_tel: '', // 随行人员 电话
            passenger_cardno: '' // 随行人员 身份证
            // hesuan_result: '', // 随行人员 核酸结果
            // hesuan_detail: '', // 随行人员 核酸结果详情
            // quguo_high_risk: '', // 随行人员 是否去过高风险地区
          }
        ]
      }
    },
    routerToList () {
      if (!this.formData.cardno) { Toast.fail('未获取到身份证号'); return }
      this.$router.push({
        path: '/closedList',
        query: {
          cardNo: this.formData.cardno
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  overflow-x: hidden;
  /deep/.van-field__label {
    width: 9em;
    display: flex;
    align-items: center;
  }
  /deep/.van-field__error-message {
    text-align: right;
  }
  .btn {
    height: 80px;
    background: #f1f3f4;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 10px;
      vertical-align: middle;
    }
  }
}
.czInfo {
  height: 80px;
  font-size: 32px;
  //font-weight: bold;
  //color: white;
  //background-color: #58be6a;
  background-color: #eee;
  display: flex;
  align-items: center;
  div {
    width: 690px;
    margin: 0 auto;
  }
}
</style>
